<template>
  <div class="container">
    <div class="barrage-canvas">
      <template v-for="barrage in barrageMap" :key="barrage.id">
        <div :id="barrage.id"  v-if="barrage.visable" class="barrage" :style="`transform: translateY(${barrage.top * 25 }px) translateX(-200px)`">
          {{ barrage.text }}
        </div>
      </template>
    </div>
    <div class="barrage-footer">
      <input v-model="inputBarrageValue" @keyup.enter="runBarrage({ text: inputBarrageValue, size: 'normal' })" />
      <button @click="runBarrage({ text: inputBarrageValue, size: 'normal' })">发送弹幕</button>
    </div>
  </div>

</template>


<script lang="ts">

import { defineComponent, markRaw, onMounted, onUnmounted, onUpdated, reactive, ref, SetupContext } from 'vue';
import { createAnimationTask } from '@/lib/y-animation';


interface IBarrageOption {
  text: String;
  size: 'big' | 'normal' | 'small';
}

const useBarrage = () => {
  let barrageMap = reactive<any>([]);
  let time = 0;

  const runBarrage = ({ text, size }: IBarrageOption ) => {
    const animationTask = createAnimationTask();
    barrageMap.push({
      text,
      size,
      id: `barrage-${time}`,
      top: Math.round( Math.random() * 10 ),
      visable: true,
    })
    const nowTime = time;
    ++time;
    
    setTimeout(() => {
      
      animationTask.createAni(
        {
          styleName: 'translateX',
          domID: `barrage-${nowTime}`,
          to: -220,
          eventTime: 12 * 1e3,
        },
        {
          type: 'linear',
          from: 1000,
          callback: () => {
            barrageMap[nowTime].visable = false;
          }
        }
      );
    }, 50)
  };

  return {
    barrageMap,
    runBarrage,
  }
}


export default defineComponent({ components: { },
setup(props: any, context: SetupContext ) {
  
  const inputBarrageValue = ref<String>('');
  // const 

  onMounted(()=>{

  })

  return {
    ...useBarrage(),
    inputBarrageValue,
  };
},
}); 

</script>

<style lang="scss" scoped>


.container {
  width: 100vw;
  height: 100vh;
  text-align: left;

  .barrage-canvas {
    width: 1000px;
    left: 50%;
    margin-left: -500px;
    height: 650px;
    border: 5px solid black;
    position: relative;
    overflow: hidden;

    .barrage {
      max-width: 200px;
      position: absolute;
      word-wrap:break-word;
      position: absolute;
    }

  }

  .barrage-footer {
    // height: 30px;
    width: 1000px;
    left: 50%;
    margin-left: -500px;
    border: 1px solid black;
    position: relative;

    input {
      height: 30px;
      width: 880px;
    }
    button {
      width: 111px;
      height: 36px;
    }
  }
}


</style>